Brauzer kengaytmalarini ishlab chiqish: Manifest V3 va JavaScript API'larini o'zlashtirish

Brauzer kengaytmalar veb-brauzer tajribasini yaxshilash va moslashtirishning kuchli usulini taqdim etadi. Ular ishlab chiquvchilarga veb-brauzerlarga funksionallikni qo'shish, veb-sahifalar bilan o'zaro aloqada bo'lish va veb-xizmatlar bilan integratsiyalashuv imkonini beradi. Ushbu qo'llanma Manifest V3 va ushbu kengaytmalar uchun asos bo'lgan JavaScript API'lariga e'tibor qaratgan holda, brauzer kengaytmalarini ishlab chiqishga keng qamrovli sharh beradi.

Brauzer kengaytmalarini tushunish

Brauzer kengaytmasi bu veb-brauzerning funksionalligini kengaytiradigan kichik dasturiy ta'minotdir. Kengaytmalar veb-sahifalarni o'zgartirishi, yangi xususiyatlarni qo'shishi va tashqi xizmatlar bilan integratsiyalashishi mumkin. Ular odatda JavaScript, HTML va CSS-da yoziladi va kengaytmalar metama'lumotlari va ruxsatlarini tavsiflovchi manifest fayli bilan ZIP-fayl sifatida paketlanadi.

Brauzer kengaytmalarining mashhur foydalanish holatlari quyidagilarni o'z ichiga oladi:

• Reklama blokatorlari: Veb-sahifalardan reklama roliklarini olib tashlaydi.
• Parol menejerlari: Parollarni xavfsiz saqlaydi va boshqaradi.
• Mahsuldorlik vositalari: Vazifa boshqaruvi va notalar yozish kabi xususiyatlar bilan ish jarayonini yaxshilaydi.
• Kontentni moslashtirish: Veb-sahifalarning ko'rinishi va xulq-atvorini o'zgartiradi.
• Qulaylik vositalari: Nogironligi bo'lgan foydalanuvchilar uchun veb-qulaylikni yaxshilaydi.

Manifest V3: Yangi standart

Manifest V3 - bu kengaytmalar metama'lumotlari, ruxsatlari va resurslarini tavsiflovchi JSON fayli bo'lgan brauzer kengaytmasi manifest faylining eng so'nggi versiyasidir. U kengaytmalar ishlab chiqish jarayoniga muhim o'zgarishlar kiritadi, asosan yaxshilangan xavfsizlik, maxfiylik va samaradorlikka qaratilgan. Manifest V3 dagi asosiy o'zgarishlar quyidagilarni o'z ichiga oladi:

• Xizmat ishchilari: Yaxshilangan samaradorlik va kamroq xotira iste'moli uchun fon sahifalarini xizmat ishchilari bilan almashtirish. Xizmat ishchilari fon rejimida ishlaydigan va tarmoq so'rovlari va signallari kabi voqealarni boshqaradigan voqea-yo'naltirilgan skriptlardir.
• Deklarativ Tarmoq So'rovi API: Tarmoq so'rovlarini filtrlash uchun blokirovka qiluvchi webRequest API'sini Deklarativ Tarmoq So'rovi API'si bilan almashtirish. Bu tarmoq trafigiga kengaytmalar kirishini cheklash orqali maxfiylik va xavfsizlikni oshiradi.
• Kontent xavfsizligi siyosati (CSP): Ixtiyoriy kodni ijro etishni oldini olish va xavfsizlik xatarlarini kamaytirish uchun qattiqroq CSP siyosatlarini qo'llash.
• Manifest versiyasi: manifest.json faylidagi manifest_version kaliti 3 ga o'rnatilishi kerak.

Manifest V2 dan Manifest V3 ga o'tish

Manifest V2 dan Manifest V3 ga o'tish ehtiyotkorlik bilan rejalashtirish va kod o'zgarishlarini talab qiladi. Mana bosqichma-bosqich qo'llanma:

1. Manifest faylini yangilang: manifest_version ni 3 ga o'rnating va Manifest V3 talablariga rioya qilish uchun permissions va background maydonlarini yangilang.
2. Fon sahifalarini xizmat ishchilari bilan almashtiring: Fon skriptlarini xizmat ishchilari sifatida qayta yozing, chrome.scripting va chrome.alarms API'laridan foydalanib voqealarni boshqaring.
3. Deklarativ Tarmoq So'rovi API'siga o'tkazing: blokirovka qiluvchi webRequest API chaqiruvlarini declarativeNetRequest API'sida aniqlangan deklarativ qoidalar bilan almashtiring.
4. Kontent xavfsizligi siyosatini yangilang: Qattiqroq CSP talablariga rioya qilish uchun manifest faylidagi content_security_policy maydonini sozlang.
5. To'liq sinovdan o'tkazing: Brauzerlararo moslik va to'g'ri funksionallikni ta'minlash uchun kengaytmangizni turli brauzerlarda keng sinovdan o'tkazing.

Misol: Fon skriptini xizmat ishchisiga o'tkazish

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "Mening Kengaytmam",
  "version": "1.0",
  "description": "Oddiy kengaytma",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Brauzer Kengaytmalar Uchun Muhim JavaScript API'lari

Brauzer kengaytmalar brauzer va veb-sahifalar bilan o'zaro aloqada bo'lish uchun bir qator JavaScript API'lariga tayanadi. Mana eng muhim API'lar:

1. chrome.runtime

chrome.runtime API kengaytmalarining ish muhitiga kirishni ta'minlaydi. U kengaytmalar fon skripti bilan muloqot qilish, manifest fayliga kirish va kengaytmalar hayot tsiklining boshqarish imkonini beradi.

Asosiy usullar:

• chrome.runtime.sendMessage(): Fon skriptiga yoki boshqa kengaytmalariga xabar yuboradi.
• chrome.runtime.onMessage.addListener(): Boshqa skriptlardan xabarlarni tinglaydi.
• chrome.runtime.getManifest(): Kengaytmalar manifest faylini JavaScript obyekti sifatida qaytaradi.
• chrome.runtime.reload(): Kengaytmani qayta yuklaydi.

Misol: Kontent skriptidan fon skriptiga xabar yuborish

Kontent Skripti (content.js):

            chrome.runtime.sendMessage({message: "Salom kontent skriptidan!"}, function(response) {
  console.log("Fon skriptidan javob: ", response.message);
});

            

              
                Copy
              
            
          

Fon Skripti (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Kontent skriptidan xabar: ", request.message);
    sendResponse({message: "Salom fon skriptidan!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

chrome.storage API kengaytma ichida ma'lumotlarni saqlash va olish mexanizmini taqdim etadi. U mahalliy va sinxronlangan saqlash variantlarini taklif etadi.

Asosiy usullar:

• chrome.storage.local.set(): Ma'lumotlarni mahalliy saqlaydi.
• chrome.storage.local.get(): Mahalliy saqlashdan ma'lumotlarni oladi.
• chrome.storage.sync.set(): Foydalanuvchining qurilmalari bo'ylab sinxronlangan ma'lumotlarni saqlaydi.
• chrome.storage.sync.get(): Sinxronlangan saqlashdan ma'lumotlarni oladi.

Misol: Mahalliy saqlashda ma'lumotlarni saqlash va olish

            // Ma'lumotlarni saqlash
chrome.storage.local.set({key: "value"}, function() {
  console.log("Qiymat " + "value" + " ga o'rnatildi");
});

// Ma'lumotlarni olish
chrome.storage.local.get(["key"], function(result) {
  console.log("Joriy qiymat " + result.key + " dir");
});

            

              
                Copy
              
            
          

3. chrome.tabs

chrome.tabs API kengaytmalariga brauzer tabaqasi bilan o'zaro aloqada bo'lish imkonini beradi. U tabaqalarni yaratish, so'rash, o'zgartirish va yopish uchun usullarni taqdim etadi.

Asosiy usullar:

• chrome.tabs.create(): Yangi tabaqa yaratadi.
• chrome.tabs.query(): Muayyan mezonlarga mos keladigan tabaqalarni so'raydi.
• chrome.tabs.update(): Tabaqa xususiyatlarini yangilaydi.
• chrome.tabs.remove(): Tabaqani yopadi.
• chrome.tabs.executeScript(): Tabaqada JavaScript kodini bajaradi.

Misol: Yangi Tabaqa Yaratish

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("Yangi tabaqa ID: " + tab.id + " bilan yaratildi");
});

            

              
                Copy
              
            
          

4. chrome.alarms

chrome.alarms API kengaytmalariga ma'lum bir vaqtda yoki belgilangan intervaldan so'ng bajariladigan vazifalarni rejalashtirish imkonini beradi. Bu Manifest V3 da ayniqsa muhimdir, chunki u fon sahifalarida taymerlardan foydalanishni almashtiradi, ular endi qo'llab-quvvatlanmaydi.

Asosiy usullar:

• chrome.alarms.create(): Yangi signal yaratadi.
• chrome.alarms.get(): Mavjud signallni oladi.
• chrome.alarms.clear(): Signalni tozalaydi.
• chrome.alarms.getAll(): Barcha signallarni oladi.
• chrome.alarms.onAlarm.addListener(): Signal voqealarini tinglaydi.

Misol: Signal Yaratish

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Signal ishga tushirildi!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

chrome.scripting API kengaytmalariga veb-sahifalarga JavaScript va CSSni kiritish imkonini beradi. Ushbu API Manifest V3 ning asosiy qismidir va xizmat ishchilari tomonidan yuklanganidan keyin veb-sahifalar bilan o'zaro aloqada bo'lish uchun ishlatiladi.

Asosiy usullar:

• chrome.scripting.executeScript(): Tabaqa yoki freymda JavaScript kodini bajaradi.
• chrome.scripting.insertCSS(): Tabaqa yoki freymga CSSni kiritadi.

Misol: Tabaqaga JavaScript kiritish

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Skript kiritildi!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

chrome.notifications API kengaytmalariga foydalanuvchiga bildirishnomalar ko'rsatish imkonini beradi. Bu yangilanishlar, ogohlantirishlar va boshqa muhim ma'lumotlarni taqdim etish uchun foydalidir.

Asosiy usullar:

• chrome.notifications.create(): Yangi bildirishnoma yaratadi.
• chrome.notifications.update(): Mavjud bildirishnomani yangilaydi.
• chrome.notifications.clear(): Bildirishnomani tozalaydi.
• chrome.notifications.getAll(): Barcha bildirishnomalarni oladi.

Misol: Bildirishnoma Yaratish

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'Mening Kengaytmam',
  message: 'Salom mening kengaytmamdan!'
}, function(notificationId) {
  console.log('Bildirishnoma ID: ' + notificationId + ' bilan yaratildi');
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

chrome.contextMenus API kengaytmalariga brauzerning kontekst menyusiga (o'ng tugmasini bosish menyusi) elementlar qo'shish imkonini beradi. Bu foydalanuvchilarga veb-sahifalardan to'g'ridan-to'g'ri kengaytmalar funksionalligiga kirish uchun qulay usulni taqdim etadi.

Asosiy usullar:

• chrome.contextMenus.create(): Yangi kontekst menyusi elementi yaratadi.
• chrome.contextMenus.update(): Mavjud kontekst menyusi elementini yangilaydi.
• chrome.contextMenus.remove(): Kontekst menyusi elementini olib tashlaydi.
• chrome.contextMenus.removeAll(): Kengaytmalar tomonidan yaratilgan barcha kontekst menyusi elementlarini olib tashlaydi.

Misol: Kontekst menyusi elementi yaratish

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "Mening Kontekst Menyu Elementim",
  contexts: ["page", "selection"]
}, function() {
  console.log("Kontekst menyusi elementi yaratildi.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Kontekst menyusi elementi bosildi!");
    alert("Siz kontekst menyusi elementini bosdingiz!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

chrome.i18n API kengaytmangizni xalqaro miqyosda taqdim etish, uni turli tillar va mintaqalardagi foydalanuvchilar uchun qulay qilish uchun ishlatiladi. U sizning kengaytmangizning UI va xabarlarining mahalliy versiyalarini taqdim etish imkonini beradi.

Asosiy Usullar:

• chrome.i18n.getMessage(): Kengaytmaning _locales direktariyasidan mahalliy tilga moslashtirilgan satrni oladi.

Misol: Mahalliy tilga moslashtirish uchun chrome.i18n dan foydalanish

Avvalo, kengaytmangizning ildiz papkasida _locales direktariyasini yarating. Ichida en, es, fr va boshqalar kabi tilga xos papkalarni yarating.

Har bir til papkasi ichida messages.json faylini yarating. Misol uchun, _locales/en/messages.json ichida:

            {
  "extensionName": {
    "message": "Mening Kengaytmam",
    "description": "Kengaytmaning nomi."
  },
  "greetingMessage": {
    "message": "Salom dunyo!",
    "description": "Oddiy salomlashuv xabari."
  }
}

            

              
                Copy
              
            
          

Keyin, JavaScript kodida:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Chiqarish: Mening Kengaytmam
console.log(greeting);      // Chiqarish: Salom dunyo!

            

              
                Copy
              
            
          

Brauzerlararo Moslik

Chrome kengaytma ishlab chiqish uchun eng mashhur brauzer bo'lsa-da, brauzerlararo moslikni hisobga olish muhimdir. Firefox, Safari va boshqa brauzerlar ham kengaytmalarini qo'llab-quvvatlaydi, ammo ularning API'lari va manifest formatlari biroz farq qilishi mumkin.

Brauzerlararo moslikni ta'minlash uchun:

• WebExtensions API'sidan foydalaning: WebExtensions API - bu ko'p brauzerlar tomonidan qo'llab-quvvatlanadigan brauzer kengaytmasi ishlab chiqish uchun standartlashtirilgan API.
• Turli brauzerlarda sinovdan o'tkazing: Moslik muammolarini aniqlash va tuzatish uchun kengaytmangizni turli brauzerlarda sinovdan o'tkazing.
• Polyfilllardan foydalaning: Turli brauzerlarda yo'qolgan API funksionalligini ta'minlash uchun polyfilllardan foydalaning.
• Shartli kod: Brauzerga xos farqlarga moslashish uchun shartli koddan foydalaning. Masalan: if (typeof browser === "undefined") { var browser = chrome; }

Brauzer Kengaytmalarini Ishlab Chiqish Uchun Eng yaxshi Amaliyotlar

Brauzer kengaytmalarini ishlab chiqishda quyidagi eng yaxshi amaliyotlarga amal qiling:

• Ruxsatnomalarni kamaytiring: Faqat kengaytmangizga mutlaqo kerak bo'lgan ruxsatnomalarni so'rang. Bu foydalanuvchi maxfiyligi va xavfsizligini oshiradi.
• Xavfsiz kodlash amaliyotlaridan foydalaning: Saytlararo skriptlash (XSS) va kod kiritish kabi zaifliklarni oldini olish uchun xavfsiz kodlash amaliyotlariga amal qiling.
• Samaradorlikni optimallashtiring: Brauzer samaradorligiga ta'sirini kamaytirish uchun kengaytmangizning samaradorligini optimallashtiring.
• Aniq va qisqa hujjatlarni taqdim eting: Foydalanuvchilarga kengaytmangizdan qanday foydalanishni tushunishga yordam beradigan aniq va qisqa hujjatlarni taqdim eting.
• Xatolarni muloyimlik bilan boshqaring: Kengaytmangizning ishdan chiqishini yoki kutilmagan xulq-atvorni oldini olish uchun xatolarni boshqarishni joriy qiling.
• Kengaytmangizni yangi tuting: Xatolarni, xavfsizlik zaifliklarini va moslik muammolarini hal qilish uchun kengaytmangizni muntazam ravishda yangilang.
• Xalqaroizatsiyani (i18n) hisobga oling: Kengaytmangizni turli tillarga osonlik bilan moslashtirish uchun loyihalashtiring. chrome.i18n API'sidan foydalaning.
• Foydalanuvchi maxfiyligini hurmat qiling: Kengaytmangiz foydalanuvchi ma'lumotlarini qanday yig'ayotgani va undan foydalanayotgani haqida shaffof bo'ling va zarur bo'lganda foydalanuvchi roziligini oling. GDPR va CCPA kabi tegishli maxfiylik qoidalariga rioya qiling.

Kengaytmangizni Do'konlarga Taqdim Etish

Kengaytmangiz ishlab chiqilgan va sinovdan o'tkazilgandan so'ng, uni foydalanuvchilar uchun qulay qilish uchun brauzer kengaytmalari do'konlariga taqdim etishni xohlaysiz. Har bir brauzer o'z do'koni va taqdim etish jarayoniga ega:

• Chrome veb-do'koni: Kengaytmangizni Chrome foydalanuvchilari uchun Chrome veb-do'koniga taqdim eting. Jarayon ishlab chiquvchi hisobini yaratishni, kengaytmangizni paketlashni va uni do'konga yuklashni o'z ichiga oladi.
• Firefox qo'shimchalari: Kengaytmangizni Firefox foydalanuvchilari uchun Firefox qo'shimchalariga taqdim eting. Jarayon Chrome veb-do'koniga o'xshash va ishlab chiquvchi hisobini yaratish va kengaytmangizni ko'rib chiqish uchun topshirishni o'z ichiga oladi.
• Safari kengaytmalar galereyasi: Kengaytmangizni Safari foydalanuvchilari uchun Safari kengaytmalar galereyasiga taqdim eting. Jarayon Apple-dan ishlab chiquvchi sertifikatini olishni va kengaytmangizni ko'rib chiqish uchun topshirishni o'z ichiga oladi.

Kengaytmangizni taqdim etayotganda, tavsiflovchi sarlavha, batafsil tavsif, ekran tasvirlari va maxfiylik siyosatini o'z ichiga olgan holda aniq va to'liq ma'lumotlarni taqdim etganingizga ishonch hosil qiling. Kengaytma do'konlari ularning siyosatlari va ko'rsatmalariga rioya qilishlarini ta'minlash uchun topshiriqlarni ko'rib chiqadi.

Xulosa

Manifest V3 va JavaScript API'lari bilan brauzer kengaytmalarini ishlab chiqish brauzer tajribasini moslashtirish va yaxshilashning kuchli usulini taqdim etadi. Asosiy tushunchalarni tushunish, eng yaxshi amaliyotlarga amal qilish va brauzerlararo moslikni hisobga olish orqali ishlab chiquvchilar butun dunyo bo'ylab foydalanuvchilar uchun qimmatli va jozibali kengaytmalar yaratishi mumkin. Veb rivojlanib borar ekan, brauzer kengaytmalar internetning kelajagini shakllantirishda muhim rol o'ynashda davom etadi.

Kengaytmalar ishlab chiqishda har doim foydalanuvchi maxfiyligi va xavfsizligini birinchi o'ringa qo'yishni unutmang. Ushbu tamoyillarni yodda tutgan holda qurish orqali siz foydali va ishonchli kengaytmalar yarata olasiz.

Ushbu qo'llanma brauzer kengaytmalarini ishlab chiqishni boshlash uchun mustahkam asos yaratadi. Siz chuqurroq kirar ekansiz, mavjud bo'lgan turli API'lar va xususiyatlarni o'rganing va innovatsion va ta'sirchan kengaytmalar yaratish uchun turli usullarni sinab ko'ring.